import React, { useState, useEffect, useCallback } from 'react'
import { Table, Space, Button, Switch, Image, Popconfirm, message, Select, Input } from 'antd';
import { getProList, updateFlag, getCategoryList, getSearchList } from './../../api/pro'
import "./index.css"
const { Option } = Select;


const App = () => {
    const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          fixed: 'left',
          render (text, data, index) {
            return (<span>{pageNum * pageize + index+1}</span>)
          }
        },
        {
            align: 'center',
            title: '名称',
            width: 300,
            fixed: 'left',
            dataIndex: 'proname',
        },
        {
          align: 'center',
          title: '图片',
          width: 200,
          dataIndex: 'img1',
          render (text, data, index) {
              return (<Image height={100} src={text} alt="" />)
          }
        },
        {
          align: 'center',
          title: '品牌',
          width: 110,
          dataIndex: 'search',
        },
        {
          align: 'center',
          title: '分类',
          width: 110,
          dataIndex: 'category',
        },
        {
          align: 'center',
          title: '原价',
          width: 100,
          sorter: (a, b) => a.originprice - b.originprice,
          dataIndex: 'originprice',
        },
        {
          align: 'center',
          title: '折扣',
          width: 100,
          dataIndex: 'discount',
        },
        {
          align: 'center',
          title: '销量',
          width: 100,
          sorter: (a, b) => a.sales - b.sales,
          dataIndex: 'sales',
        },
        {
          align: 'center',
          title: '是否售卖',
          width: 100,
          fixed: 'right',
          dataIndex: 'issale',
          render (text, data, index) {
            return (<Switch checked={data.issale} onChange={ checked => {
                updateFlag({
                    proid: data.proid,
                    type: 'issale',
                    flag: checked
                }).then(res => {
                    getProList().then(res => {
                        setProList(res.data)
                    })
                })
            }} />)
          }
        },
        {
          align: 'center',
          title: '是否秒杀',
          width: 100,
          fixed: 'right',
          dataIndex: 'isseckill',
          render (text, data, index) {
            return (<Switch checked={data.isseckill} onChange={ checked => {
                updateFlag({
                    proid: data.proid,
                    type: 'isseckill',
                    flag: checked
                }).then(res => {
                    getProList().then(res => {
                        setProList(res.data)
                    })
                })
            }} />)
          }
        },
        {
          align: 'center',
          title: '是否推荐',
          width: 100,
          fixed: 'right',
          dataIndex: 'isrecommend',
          render (text, data, index) {
            return (<Switch checked={data.isrecommend} onChange={ checked => {
                updateFlag({
                    proid: data.proid,
                    type: 'isrecommend',
                    flag: checked
                }).then(res => {
                    getProList().then(res => {
                        setProList(res.data)
                    })
                })
            }} />)
          }
        },
        {
          align: 'center',
          title: '操作',
          width: 220,
          fixed: 'right',
          render () {
            return (
              <>
                <Space>
                    <Button>编辑</Button>
                    <Popconfirm placement="top" title="确认删除吗？" onConfirm={confirm} okText="Yes" cancelText="No">
                        <Button>删除</Button>
                    </Popconfirm>
                </Space>
              </>
            )
          }
        },
    ]
    const [ proList, setProList ] = useState([])
    const [ categoryList, setCategoryList ] = useState([])
    const [ pageNum, setPageNum ] = useState(0)
    const [ pageize, setPageize ] = useState(10)
    const [ category, setCategory ] = useState('')
    const [ search, setSearch ] = useState('')

    useEffect(() => {
        getProList().then(res => {
            setProList(res.data)
        })
        getCategoryList().then(res => {
            setCategoryList(res.data)
        })
    }, [])
    useEffect(() => {
        getSearchList({ category, search }).then(res => {
            console.log(res.data);
            setProList(res.data)
        })
    }, [category, search])
    const pageChange = (pagination, filters, sorter) => {
        console.log(pagination);
        setPageNum(pagination.current - 1)
        setPageize(pagination.pageSize)
    }
    const confirm = (e) => {
        message.success("理论上是删除了，但我还没做")
    }
    const selectChangeHanler = useCallback( val => {
        setCategory(val)
        setSearch('')
    }, [])
    const inputChangeHandler = useCallback( e => {
        setSearch(e.target.value)
    }, [])
    const searchFn = () => {
        getSearchList({ category, search }).then(res => {
            setProList(res.data)
        })
    }
    return (
        <>
            <Space direction="horizontal" style={{width: '100%', marginBottom: '10px'}}>
                <Select style={{ width: 120 }} value={category} defaultValue="全部" onChange={selectChangeHanler}>
                    <Option value="">全部</Option>
                    {
                        categoryList.map(item => (
                            <Option key={item}>{item}</Option>
                        ))
                    }
                </Select>
                <Input placeholder="请输入搜索关键词" value={search} onChange={inputChangeHandler} />
                <Button onClick={searchFn}>搜索</Button>
            </Space>
            <Table columns={columns} width="100%" onChange={pageChange} dataSource={proList} scroll={{ x: 100, y: 580 }} />
        </>
    )
}

export default App